<template>
  <div class="login-page">
  <div class="login-container">
    <el-card class="login-card">
      <h2 class="login-title">登录</h2>
      <el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="80px">
        <el-form-item label="账号" prop="username">
          <el-input v-model="loginForm.username" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="loginForm.password" type="password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleLogin">登录</el-button>
          <el-button type="text" @click="handleRegister">注册</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: '',
      },
      rules: {
        username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      },
    };
  },
  methods: {
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          const { username, password } = this.loginForm;

          // 发送 POST 请求到后端验证登录
         axios
  .post('http://192.168.239.53:8082/login', { username, password })
  .then((response) => {
    if (response.data.code === 1) {
      const token = response.data.data;  // 确保这里获取到的是 token 字符串
      console.log('Received token:', token);  // 打印 token 以确认它是否有效

      if (token) {
        // 存储 token 到 sessionStorage
        sessionStorage.setItem('token', token);
        console.log('Token stored in sessionStorage:', sessionStorage.getItem('token'));

        // 存储其他用户信息（可选）
        sessionStorage.setItem('user', JSON.stringify(response.data.data));

        // 登录成功提示并跳转
        this.$message.success('登录成功！');
        this.$router.push('/'); // 登录成功后跳转到主页
      } else {
        console.log('Token is missing or invalid');
        this.$message.error('登录失败，未收到有效的 token');
      }
    } else {
      this.$message.error(response.data.msg || '登录失败');
    }
  })
  .catch((error) => {
    console.error('登录请求失败:', error);
    this.$message.error('登录请求失败，请稍后再试');
  });

        } else {
          console.log('登录表单校验失败');
        }
      });
    },
    navigateToRegister() {
      this.$router.push('/register'); // 跳转到注册页面
    },
     handleRegister() {
      this.$router.push('/register'); // 跳转到注册页面
    },
  },
};

</script>

<style scoped>
/* 整个页面背景样式 */
.login-page {
  width: 100vw;
  height: 100vh;
  background-image: url(https://img2.baidu.com/it/u=2801022481,3899773248&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1428); 
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  padding: 20px; /* 添加一定的内边距 */
}
.login-card {
  width: 400px;
  padding: 20px;
}
.login-title {
  text-align: center;
  margin-bottom: 20px;
}
</style>
